<template>
    <div class="video-detail" 

    v-loading="loading" 
    element-loading-text="加载中请稍等" 
    element-loading-background="rgba(164,176,190,0.7)"
    >
    <!-- 上面3个属性是elementui的加载组件使用方式。 -->

        <button @click="goBack()">返回</button>
        <span class="video-detail-foldername">{{videoFolderName}}</span>

        <!-- 视频详情列表整体容器，用于调整里面元素的弹性布局 -->
         <div class="video-detail-wrap">

             <!-- 视频详情元素，每个是一个独立视频 -->
            <div class="video-detail-cover" 
            v-for="item in videoDetailList" :key="item.id" 
            :style="{'background-image':'url('+nginxUrl+item.showCoverImage+')'}" 
            @click="showVideo(item.showSmallVideo)"
            >
                <!-- 每个视频元素里的文字描述部分 -->
                <div class="video-detail-text">{{item.name}}</div>


                <!-- 每个视频元素里的设置按钮 -->
                <div class="video-detail-setting" @click.stop>
                    <el-dropdown trigger="click" @command="settingCommand">
                        <span class="el-dropdown-link">
                            <i class="el-icon-s-tools"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="'a--'+item.id">移动</el-dropdown-item>
                            <el-dropdown-item :command="'b--'+item.id">重命名</el-dropdown-item>
                            <el-dropdown-item :command="'c--'+item.id">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- 
                    父元素点击事件，和 子元素点击事件 冲突的解决方案：
                    在子元素中绑定一个阻止冒泡的点击事件 @click.stop
                    参考文章:
                        https://blog.csdn.net/weixin_45663264/article/details/108660155(我参考这篇解决的)
                        https://www.jianshu.com/p/bb06a9d2ac77
                        https://www.cnblogs.com/liangjing-yy/p/9013061.html
                -->
            </div>
            <!-- 
            v-for循环中，style带入变量和class带入变量 的方法：
            https://blog.csdn.net/webfullstack/article/details/82909692 
            ps：style和class里的键和值都要用单引号抱起来！！！
            总结：在html标签属性上使用v-bind即可动态使用组件里的变量。
            -->

            <div style="width:265px;height:0"></div>
            <!-- 
                最后追加一个div，目的是填充最后不满一行的情况，避免不满一行时元素排列出现问题。
                注意：追加div的宽度要和前面的元素一致，高度要为0。
            -->
         </div>


        <!-- 分页组件 -->
        <pagination
         :count="page.count" 
         :pageCount="page.pageCount" 
         :pageNo="page.pageNo" 
         :pageSize="page.pageSize" 
         @pageChange="pageCurrentChange"
        >
        </pagination>


        <!-- 对话框 + 视频播放组建 -->
         <el-dialog :visible.sync="videoVisible" :append-to-body="true" :destroy-on-close="true">
            <video-player :videoUrl="videoUrl"></video-player>
         </el-dialog>
         <!-- 注意：dialog组件的用法，需要加上:append-to-body="true"属性后，其它区域才会出现遮罩效果。 -->
         <!-- 注意：dialog组建关闭时销毁dialog中的元素，需要设置:destroy-on-close="true"，否则里面的播放器会一直播放！ -->
    </div>
</template>

<script>

import videoApi from '@/api/video-api'
import videoplayer from '@/components/content/video/videoplayer'
import pagination from '@/components/pagination'

export default {
    name:'video-detail',
    components: {
        'video-player':videoplayer,
        pagination
    },
    data(){
        return{
            videoFolderId:'',
            videoFolderName:'',
            videoDetailList:[],
            loading: true,
            nginxUrl:window.appconfig.baseurl,
            videoVisible:false,
            videoUrl:'',

            page:{
                count:0, //总条数
                pageCount:0, //总页数
                pageNo:0, //当前页码
                pageSize:0 //每页行数
            }
        }
    },
    methods:{
        //返回视频集合页面
        goBack(){
            this.$router.push({path:'/home/video'});
        },

        //点击视频封面，弹出窗体，并给里面的视频播放器传入视频url。
        showVideo(videoUrl){ 
            // console.log(videoUrl);
            this.videoUrl = videoUrl;
            this.videoVisible = true;
        },

        //点击单个视频集合的“设置”下拉选项触发的方法
        settingCommand(index){
            let type = index.split('--')[0];
            let videoFolderId = index.split('--')[1];
            if(type == 'a'){
                console.log('类型是:移动---id是:'+videoFolderId);
            }else if(type == 'b'){
                console.log('类型是:重命名---id是:'+videoFolderId);
            }else if(type == 'c'){
                console.log('类型是:删除---id是:'+videoFolderId);   
            }
        },

        //点击分页相关按钮触发的方法
        pageCurrentChange(pageNo){
            //调后端接口获取数据
            this.getPageDetail(pageNo,12,this.videoFolderId);
        },

        //调用后端接口逻辑，抽取出来供调用。
        getPageDetail(pageNo,pageSize,videoFolderId){
            //开始loading效果
            this.loading = true;

            //调后端接口获取数据
            let responseData = videoApi.getVideoDetailList(pageNo,pageSize,this.videoFolderId);
            responseData.then(data=>{
                //停止loading效果
                this.loading = false;

                //获取内容详情、分页信息
                this.videoDetailList = data.data.result;
                this.page.count = data.data.count;
                this.page.pageCount = data.data.pageCount;
                this.page.pageNo = data.data.pageNo;
                this.page.pageSize = data.data.pageSize;
            }).catch(err=>{
                console.log(err);
            })
        }
    },

    mounted(){
        //从路由路径url里获取参数
        this.videoFolderId = this.$route.query.videoFolderId;
        this.videoFolderName = this.$route.query.videoFolderName;

        //调后端接口获取数据
        this.getPageDetail(1,12,this.videoFolderId);
    }
}
</script>

<style scoped>

.video-detail{
    /* 占满整个父元素空间 */
    width: 100%;
    height: 100%;

    /* Y轴(纵向)浏览器纵向压缩后，超出区域用滚动条。 */
    overflow-y: auto;
}

.video-detail-foldername{
    color: white;
}

.video-detail-wrap{
    /* 设置弹性布局，让里面视频分类封面有序排列 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;  
}


.video-detail-cover{
    /* 设置长宽尺寸 */
    width: 265px;
    height: 110px;

    /* 设置底部外边距，让每行之间保持距离 */
    margin-bottom: 15px;

    /* 设置图片的缩放和位置移动 */
    background-size: 100% auto; /* 宽度设置为100%填充父元素的宽度，高度设置为auto保证图片比例不会变形 */
    background-repeat: no-repeat;
    background-position: 0% 40%; /* 这个是按从左往右，从上往下的百分比位置进行图片位置调整 */

    /* 设置相对定位，让里面的子元素调整位置 */
    position: relative;

    /* 设置边框的圆角 */
    border-radius: 10px;
}

.video-detail-text{
    /* 设置定位，紧贴底部，设置尺寸 */
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25%;

    /* 设置背景色半透明,设置字体颜色和尺寸 */
    background-color: rgba(84,92,100,0.7);
    color: white;

    /* 设置边框的圆角 */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    font-size: 10px;
}

.video-detail-setting{
    /* 让该容器位于父容器的右上角位置 */
    position: absolute;
    right: 2px;
    top: 2px;
}

.video-detail-setting .el-icon-s-tools{
    /* 对 "设置" 图标的进行大小、颜色的设置 */
    font-size: 20px;
    color: white;
}

.video-detail-setting:hover i{
    /* 对 "设置" 图标的hover效果进行颜色改变 */
    color: #ffa502;
}





/* 设置弹出框(el-dialog)的一些尺寸样式 */
.el-dialog__wrapper>>>.el-dialog__header{
    height: 0;
    padding: 0;
}
.el-dialog__wrapper>>>.el-dialog__body{
    padding: 0;
}
.el-dialog__wrapper>>>.el-dialog{
    margin-top: 10px !important;

    /* 
    以下的width用于控制视频播放器的大小，
    也许vue-video-player插件会自动填充父组件的尺寸？？？
    待研究。 
    */
    width: 800px;
}


</style>